<template>
    <el-container style="height: 100%;">
        <el-main style="height:100%">
            <div style="position: relative;width: 100%;height: 100%;">
                <el-tabs class="custom-tabs" v-model="activeName"  style="height: 100%;width: 100%;position: absolute;"   @tab-click="changeNext">
                    <el-tab-pane
                            v-for="(item, index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                            :lazy="true">
                        <span slot="label" v-if="item.name==='1'">{{item.title}} <span  class="notice-num"><span :id="item.component" class="total-num"></span></span></span>
                        <component :is="item.component" :params = "params"  :ref="item.name"/>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-main>
    </el-container>

</template>

<script>
import all from './all'
import approved from './approved'
import unapproved from './unapproved'

export default {
  name: 'index',
  components: { unapproved, all, approved },
  data() {
    return {
      loading: false,
      params: null,
      activeName: '1',
      editableTabs: [{
        title: '待审批',
        name: '1',
        component: 'unapproved'
      }, {
        title: '已审批',
        name: '2',
        component: 'approved'
      }, {
        title: '全部',
        name: '3',
        component: 'all'
      }],
    }
  },
  methods: {
    changeNext(tab, value) {
      // this.activeName = tab.name;
      // this.finishParams=  Object.assign({}, this.finishParams, value);
      // this.$refs[this.activeName][0].loadData&&this.$refs[this.activeName][0].loadData();
    },
    initData() {

    },
  },
  mounted() {
    this.$nextTick(function() {
      this.initData();
    })
  }
}
</script>

<style scoped lang="less">
    .custom-tabs{
        /deep/ .el-tabs__header{
            margin: 0;
        }
        /deep/ .el-tabs__content {
            height: calc(100% - 65px);
            overflow: auto;
            padding: 5px 0px;
        }
        /deep/ .el-tabs__content .el-tab-pane{
            height: 100%;
        }
        /deep/.el-tabs__item.is-disabled {
            color: #303133;
            cursor:default
        }
        /deep/.el-tabs__item.is-active {
            color: #409EFF;
            background-color: #fff;
        }
        /deep/.el-tabs__nav-wrap{
            background-color: #f5f7fa;
        }
        /deep/ .el-tabs__nav{
            display: table;
            width: 100%;
        }
        /deep/ .el-tabs__item{
            padding: 0;
            font-weight: 500;
            min-width: 100px;
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: table-cell;
        }
    }
</style>
